<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="Content-Style-Type" content="text/css" />
		<meta http-equiv="Content-Script-Type" content="text/javascript" />
		<title>sample3</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
		<script type="text/javascript">
$(function(){
	$("p.panel").load($("ul.tab li a.selected").attr("href"));
	$("ul.tab li a").click(function(){
		$("ul.tab li a").removeClass("selected");
		$(this).addClass("selected");
		$("p.panel").load($(this).attr("href"));
		return false;
	});
});
		</script>
		<style type="text/css">
*{
	margin:0;
	padding:0;
}
#container{
	width:500px;
	margin:50px auto;
}
ul.tab{
	padding:0;
}
ul.tab li{
	list-style-type:none;
	width:100px;
	height:40px;
	float:left;
}
ul.tab li a{
	outline:none;
	background:url("./images/tab.jpg");
	display:block;
	color:blue;
	line-height:40px;
	text-align:center;
}
ul.tab li a.selected{
	background:url("./images/tab_selected.jpg");
	text-decoration:none;
	color:#333;
	cursor:default;
}
p.panel{
	clear:both;
	border:1px solid #9FB7D4;
	border-top:none;
	padding:10px;
	text-indent:1em;
	color:#333;
}

		</style>
	</head>
	<body>
		<div id="container">
			<ul class="tab">
				<li><a href="JavaScript.txt" class="selected">JavaScript</a></li>
				<li><a href="CSS.txt">CSS</a></li>
				<li><a href="HTML.txt">HTML</a></li>
				<li><a href="jQuery.txt">jQuery</a></li>
				<li><a href="XHTML.txt">XHTML</a></li>
			</ul>
			<p class="panel"><p>
		</div>
	</body>
</html>